import {Card} from "@/components/ui/card.tsx";
import {Badge} from "@/components/ui/badge";
import {Space} from "antd";
import {useMemo} from "react";
import {getRandomColor} from "@/utils/getRandomColor";

function Badges() {
    const badges = useMemo(
        () => [
            "前端",
            "Vue",
            "React",
            "Tailwind CSS",
            "POST CSS",
            "Less",
            "Sass",
            "HTML",
            "CSS",
            "JavaScript",
            "Node.js",
            "Echarts",
            "element UI",
            "ant Design",
            "vite",
            "webpack",
            "Git",
            "GitHub",
            "npm",
            "yarn",
            "pnpm",
            "Linux",
            "Windows",
            "MacOS",
            "Ubuntu"
        ],
        []
    );
    
    
    return (
        <Card className="w-full p-4 hidden md:block bg-white/50 dark:bg-dark-gray-bottom backdrop-blur-sm">
            <Space className="flex flex-wrap gap-3">
                {badges.map((badge, index) => (
                    <Badge
                        key={index}
                        className={`${getRandomColor()}
              text-gray-800 dark:text-gray-100
              hover:bg-gray-200
              font-medium text-sm
              shadow-sm dark:shadow-none`}
                    >
                        {badge}
                    </Badge>
                ))}
            </Space>
        </Card>
    );
}

export default Badges;